<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>jsx小练习</title>
  <!--  引入React核心库-->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!--  引入react-dom,用于支持React操作Dom-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- 引入babel，用于将jsx转为js-->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<script type="text/babel">
  const data = ['Angular','React','Vue']
  const VDom = (
    <div>
      <h1>前端js框架列表</h1>
      <ul>
        {
          data.map((item, index)=>{
            return <li key={index}>{item}</li>
          })
        }
      </ul>
    </div>
  )

  const container = document.getElementById('root');
  const root = ReactDOM.createRoot(container);
  root.render(VDom);

</script>
</body>
</html>
